<script lang="ts" setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import { Query } from '@/api/index'
// import { ElMessage } from 'element-plus'
import Header from '../../components/Common/Header.vue'
import HeaderBox from './components/HeaderBox.vue'
import InputRatio from './components/InputRatio.vue'
import BadCount from './components/BadCount.vue'
import ProductInfo from './components/ProductInfo.vue'
import YieldComparison from './components/YieldComparison.vue'
import WoWarning from './components/WoWarning.vue'
import WoWarning2 from './components/WoWarning2.vue'
import { ElMessage } from 'element-plus'
import { formatTableCol } from '@/utils/FormatData'
//工单信息
const CapaList = ref<any[]>([])
const CapaCols = ref<any[]>([])
//工单信息
const topList = ref<any[]>([])
const topCols = ref<any[]>([])
//小时产能
const yieldData = ref({})
let xList: any[] = []
let yList: any[] = []
let ratioList: any[] = []

const lineList = ref<any[]>([])
function getLine() {
  const post = {
    inputStr: 'JobType=FA_Monitor;$;OperType=GetValue;$;Key=Line',
    jsonData: ''
  }
  Query(post).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    const { valueInfo } = res.data
    lineList.value = valueInfo
  })
}
//线别
const lineType = ref('')
function changeLine(line: string) {
  lineType.value = line
  line && getInfo()
}
//班别
const shift = ref()
//表头数据
const headerData = ref<any[]>([])
//不良统计
const inputRatioData = ref({})
let inputXList: any[] = []
let inputYList: any[] = []
//质量统计
const tempInfo = ref({})
let tempXList: any[] = []
let targetList: any[] = []
let actualList: any[] = []
//计划目标仪表盘
const targetInfo = ref({})
//置空信息
function resetData() {
  xList = []
  yList = []
  ratioList = []
  tempXList = []
  targetList = []
  actualList = []
  inputXList = []
  inputYList = []
}

//工单信息-错误提示
const tips = ref()
//查询信息
function getInfo() {
  resetData()
  tips.value = ''
  const post = {
    inputStr: `JobType=FA_Monitor;$;OperType=GetShowBData;$;Line=${lineType.value}`,
    jsonData: ''
  }
  Query(post).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }

    const {
      headInfo,
      headFieldInfo,
      capaInfo,
      capaFieldInfo,
      fpyInfo,
      fpyFieldInfo,
      inputInfo,
      inputFieldInfo,
      errFieldInfo,
      errInfo,
      woInfo,
      woFieldInfo,
      topErrInfo,
      topErrFieldInfo
    } = res.data
    //头部数据
    if (Object.keys(headInfo).length) {
      headerData.value = Object.keys(headInfo).map((item) => {
        return {
          label: headFieldInfo[item].label,
          key: item,
          value: headInfo[item]
        }
      })
    }
    //产量对比
    capaInfo.map((item: any) => {
      xList.push(item.Time)
      yList.push(item.Actual)
      ratioList.push(item.Target)
    })
    //获取legend
    let capaLegendList = [capaFieldInfo['Target']['label'], capaFieldInfo['Actual']['label']]
    yieldData.value = {
      xList,
      yList,
      ratioList,
      legendList: capaLegendList
    }
    //质量统计
    fpyInfo.map((item: any) => {
      tempXList.push(item.Station)
      targetList.push(item.Target)
      actualList.push(item.Actual)
    })
    //获取legend
    let fpyLegendList = [fpyFieldInfo['Target']['label'], fpyFieldInfo['Actual']['label']]
    tempInfo.value = {
      legendList: fpyLegendList,
      xList: tempXList,
      targetList,
      actualList
    }
    //计划目标仪表盘
    targetInfo.value = {
      inputInfo,
      inputFieldInfo
    }
    //不良统计
    errInfo.map((item: any) => {
      inputXList.push(item.Station)
      inputYList.push(item.Qty)
    })
    inputRatioData.value = {
      xList: inputXList,
      yList: inputYList
    }

    //工单信息
    const { listInfo, col } = formatTableCol({ listInfo: woInfo, fieldInfo: woFieldInfo })
    CapaList.value = listInfo
    CapaCols.value = col
    //TOP10不良
    const { listInfo: topInfo, col: topColsList } = formatTableCol({
      listInfo: topErrInfo,
      fieldInfo: topErrFieldInfo
    })
    topList.value = topInfo
    topCols.value = topColsList
  })
}

//获取看板名称
const sysName = ref()
function getSysInfo() {
  const post = {
    inputStr: 'JobType=FA_Monitor;$;OperType=GetPageInfo'
  }
  Query(post).then((res: any) => {
    if (res.code !== 200) {
      return
    }
    const { sysInfo } = res.data
    const { PageName, CT } = sysInfo
    sysName.value = PageName
    intervalTime.value = CT
  })
}

onMounted(async () => {
  getSysInfo()
  tips.value = lineType.value ? '' : '请选择线别!'
  await getLine()
  setTimeout(() => {
    startTimer()
  }, 5 * 1000)
})

const intervalTime = ref(0)

// 初始化一个变量来保存定时器
let intervalId: any
// 设置定时器函数
function startTimer() {
  // 清除之前可能设置的定时器
  if (intervalId) {
    clearInterval(intervalId)
  }
  // 设置一个新的定时器，每隔30秒（30 * 1000）执行一次指定的函数
  intervalId = setInterval(() => {
    // 代码逻辑
    if (!lineType.value) {
      return
    }
    // console.log(`getInfo每隔${intervalTime.value}秒执行一次`)
    getInfo()
  }, intervalTime.value * 1000)
}
// 如果需要在某个时刻停止定时器，可以调用以下函数
function stopTimer() {
  if (intervalId) {
    clearInterval(intervalId)
    intervalId = null
  }
}
//组件销毁时执行的函数
onUnmounted(() => {
  stopTimer()
})
</script>
<template>
  <div class="my-page w-full overflow-hidden">
    <Header :title="sysName" :show-back="true">
      <template v-slot:lineType>
        <el-select class="line-type" v-model="lineType" style="width: 113px" @change="changeLine">
          <el-option
            v-for="(item, index) in lineList"
            :key="index"
            :label="item.Label"
            :value="item.Value"
          />
        </el-select>
        <span class="tips">{{ tips }}</span>
      </template>
    </Header>
    <section class="my-page-content">
      <div class="fa-box">
        <div class="row-box row-1 flex justify-between">
          <HeaderBox :data="headerData" />
        </div>
        <div class="row-box row-2 flex justify-between">
          <div class="row-box flex justify-between" style="width: calc(55% - 15px)">
            <!-- 小时产能 -->
            <YieldComparison :data="yieldData" />
            <!-- 达成率 -->
            <WoWarning2 :data="targetInfo" />
          </div>
          <div class="row-box flex justify-between" style="width: 45%">
            <!-- 质量统计 -->
            <WoWarning :data="tempInfo" />
            <!-- 不良统计 -->
            <InputRatio :data="inputRatioData" />
          </div>
        </div>
        <div class="row-box row-3 flex justify-between">
          <!-- 工单信息 -->
          <ProductInfo :data="CapaList" :cols="CapaCols" />
          <!-- TO10不良 -->
          <BadCount :data="topList" :cols="topCols" />
        </div>
      </div>
    </section>
  </div>
</template>
<style lang="less" scoped>
@import url('../../style/reset.less');
//FA
.fa-box {
  margin-top: 10px;
}
.row-box {
  .row-box-wrapper {
    height: 380px;
  }
}
.row-1 {
  border: 1px solid #0f4988;
}
.row-2 {
  margin: 10px 0;
}
.row-3 {
  .row-box-wrapper {
    height: 450px;
  }
}
.tips {
  position: absolute;
  left: 185px;
  top: 15px;
  color: #fac858;
  font-size: 14px;
  text-align: right;
  line-height: 29px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
}
</style>
